/*
 * @Author: your name
 * @Date: 2021-12-20 21:04:02
 * @LastEditTime: 2021-12-21 18:46:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day10 react\my-app\src\component\Item.js
 */
import React, { Component } from 'react';

import itemModule from "./item.module.scss"
// import {connect} from "react-redux"
// import {bindActionCreators} from "redux"
// import * as actions from "../store/action"
 
class Item extends Component {

    state={
        arr:["","常吃","不吃","偶尔"]
    }
    // 点击星星
    changeCheck(item){
        // console.log(item);
        this.props.changeStarts(item)
    }

    changeItem(item,index){
        console.log(item,index);
        this.props.change_item(item,index)
    }

    render() { 
        let {item}=this.props
        let {arr}=this.state
        return (
            <div className={itemModule.item}>
                <dl>
                    <dt></dt>
                    <dd>
                        <h3>{item.name}</h3>
                        <p>{item.weight}</p>
                    </dd>
                </dl>
                <div>
                    <p onClick={this.changeCheck.bind(this,item)}>星星</p>
                    <p>{arr[item.flag]}</p>
                </div>
                {
                    item.check&&<ul className={itemModule.uls}>
                    {
                        arr&&arr.map((i,index) => {
                            return <li key={index} onClick={()=>this.changeItem(item,index)}>{i}</li>
                        })
                    }
                </ul>
                }
            </div>
        );
    }
}

// let mapStateToProps=(state)=>{
//     return {
//         ...state
//     }
// }

// let mapDispatchToProps=(dispatch)=>bindActionCreators(actions,dispatch)
 
// export default connect(mapStateToProps,mapDispatchToProps)(Item);

export default Item